<template>
  <div class="h-full water-content">
    <LeftContent
      :record="props.modalParams.record"
      @watch="handleWatch"
      ref="leftContentRef"
      :userName="userName"
    />
    <RightContent
      :record="props.modalParams.record"
      ref="rightContentRef"
      :box-code="code"
      :left-reload="reload"
      :userName="userName"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, onUnmounted } from 'vue';
  import LeftContent from './components/LeftContent.vue';
  import RightContent from './components/RightContent.vue';
  import { ModalParams } from '/@/components/ModelTable/src/types';
  // import { setTaskAutoEncasement } from '/@/api/jd/water-box';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();

  const props = defineProps({
    modalParams: {
      type: Object as PropType<ModalParams>,
      default: () => {},
    },
  });

  const userName = computed(() => userStore?.getUserInfo?.name ?? '');

  const rightContentRef = ref<any>(null);
  const leftContentRef = ref<any>(null);
  const code = ref('');

  let timer: any = null;

  const reload = computed(() => {
    return leftContentRef.value && leftContentRef.value.resetData;
  });

  const handleWatch = (val) => {
    code.value = val.boxCode;
    if (rightContentRef.value) {
      rightContentRef.value.toggleActiveKey(0);
    }
  };

  //  定时刷新页面数据
  const refreshPage = () => {
    if (rightContentRef.value && leftContentRef.value) {
      timer = setInterval(() => {
        setTimeout(() => {
          const { resetData } = leftContentRef.value;
          const { restApi, activeKey, setTableLoading } = rightContentRef.value;
          setTableLoading(activeKey, false);
          resetData();
          // setTaskAutoEncasement(props?.modalParams?.record?.task_id);
          restApi && restApi?.[activeKey]?.reload();
        });
      }, 3000);
    }
  };

  onMounted(() => {
    refreshPage();
  });

  onUnmounted(() => {
    clearInterval(timer);
    timer = null;
  });
</script>

<style lang="less" scoped>
  .water-content {
    display: flex;
    overflow: hidden;

    :deep(.vben-basic-table-form-container) {
      padding: 0;
    }
  }
</style>
